<template>
  <div class="container">
    <div class="accountBox">
      <div class="itemBox frow faic">
        <p
          class="label label_phone frow faic fjcfe"
          style="color: rgba(176, 176, 176, 1);"
        >{{ account }}</p>
        <div class="contentBox faic frow">
          <!-- <Input v-model="account" :maxlength="NAME_LENGTH_LIMIT" placeholder="请输入手机号" class="inputClass faic frow" readonly /> -->

          <div class="label label_ frow faic">已绑定</div>
        </div>
      </div>
      <div class="itemBox frow faic">
        <p class="label frow faic fjcfe">验证码:</p>
        <div class="contentBox faic frow">
          <div>
            <Input
              v-model="oldCode"
              placeholder="请输入验证码"
              class="inputClass faic frow"
              @on-change="oldCodeChange"
            />
          </div>

          <div
            v-ripple
            class="label label_ cp frow faic"
            @click="getOldCode"
          >{{ oldCodeTime == 60 ? "获取验证码" : oldCodeTime + "S" }}</div>
        </div>
      </div>
      <div class="itemBox frow faic">
        <p class="label frow faic fjcfe">新号码:</p>
        <div class="contentBox faic frow">
          <div>
            <Input v-model="info.phone" placeholder="请输入新手机号码" class="inputClass faic frow"/>
          </div>

          <div class="label label_ frow faic"></div>
        </div>
      </div>
      <div class="itemBox frow faic">
        <p class="label frow faic fjcfe">验证码:</p>
        <div class="contentBox faic frow">
          <div>
            <Input
              v-model="newCode"
              placeholder="请输入验证码"
              class="inputClass faic frow"
              @on-change="newCodeChange"
            />
          </div>
          <div
            v-ripple
            class="label label_ cp frow faic"
            @click="getNewCode"
          >{{ newCodeTime == 60 ? "获取验证码" : newCodeTime + "S" }}</div>
        </div>
      </div>
    </div>
    <btn-wrap @submitBtn="submit"/>
  </div>
</template>

<script>
import { Input, Message } from "view-ui-plus";
import btnWrap from "./btn.vue";
import {
  getLoginSmsCodeSend,
  postLoginSmsCodeVerify,
  putUserPhone
} from "@/api/user";
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      info: {
        phone: "", // 新号码
        phoneToken: ""
      },
      account: "",
      oldCode: "",
      oldCodeTime: 60,
      newCode: "",
      newCodeTime: 60,
      step: 1,
      codeType: 3, // 1变更信息 2重置密码 3身份验证
      oldCodeTimer: null,
      newCodeTimer: null
    };
  },
  mounted() {
    this.init();
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo
    })
  },
  components: {
    Input,
    btnWrap
  },
  methods: {
    ...mapActions("user", ["getUserInfo"]),
    async submit() {
      if (this.step != 2) {
        return Message.error("请先效验原手机号");
      }
      if (!this.info.phone) {
        return Message.error("请先填写新手机号");
      }
      if (!this.info.phoneToken) {
        return Message.error("请先效验新手机号");
      }
      let { success } = await putUserPhone(this.info);
      if (success) {
        Message.success("保存成功");
        await this.getUserInfo();
        this.init();
      }
    },
    init() {
      let phone = this.userInfo.phone;
      if (phone) {
        this.account =
          this.userInfo.phone.substring(0, 3) +
          "****" +
          this.userInfo.phone.substring(7);
      } else {
        this.account = this.userInfo.account;
      }
      this.info = {
        phone: "",
        phoneToken: ""
      };
      this.oldCode = "";
      this.oldCodeTime = 60;
      this.newCode = "";
      this.newCodeTime = 60;
      this.step = 1;
      this.oldCodeTimer && clearInterval(this.oldCodeTimer);
      this.newCodeTimer && clearInterval(this.newCodeTimer);
      this.oldCodeTimer = null;
      this.newCodeTimer = null;
    },
    async getOldCode() {
      if (this.oldCodeTime != 60) return;
      let { success } = getLoginSmsCodeSend({
        phone: this.userInfo.phone,
        codeType: 3
      });
      if (success) {
        Message.success("验证码发送成功");
        this.timeoutOldCodeTime();
      }
    },

    timeoutOldCodeTime() {
      this.oldCodeTimer = setInterval(() => {
        this.oldCodeTime -= 1;
        if (this.oldCodeTime <= 0) {
          this.oldCodeTime = 60;
          clearInterval(this.oldCodeTimer);
        } else {
        }
      }, 1000);
    },

    oldCodeChange() {
      if (this.oldCode.length != 4) {
        return false;
      }
      this.verifyOldCode();
    },

    async verifyOldCode() {
      let { phoneToken } = await postLoginSmsCodeVerify({
        code: this.oldCode,
        phone: this.userInfo.phone,
        codeType: 3
      });
      if (phoneToken) {
        this.step = 2;
      }
    },

    async getNewCode () {
      if (!this.info.phone) {
        return Message.error('请先填写新手机号')
      }
      if (this.newCodeTime != 60) return
      let { success } = await getLoginSmsCodeSend({ phone: this.info.phone, codeType: 1 })
      if (success) {
        Message.success('验证码发送成功')
        this.timeoutNewCodeTime()
      }
    },
    timeoutNewCodeTime () {
      this.newCodeTimer = setInterval(() => {
        this.newCodeTime -= 1
        if (this.newCodeTime <= 0) {
          this.newCodeTime = 60
          clearInterval(this.newCodeTimer)
        } else {
        }
      }, 1000)
    },

    newCodeChange () {
      if (this.newCode.length != 4) {
        return false
      }
      this.verifyNewCode()
    },
    async verifyNewCode () {
      let { phoneToken } = await postLoginSmsCodeVerify({ code: this.newCode, phone: this.info.phone, codeType: 1 })
      this.info.phoneToken = phoneToken
    },
  }
};
</script>

<style lang="less" scoped>
.container {
  .accountBox {
    .itemBox {
      padding: 12px 36px 12px 0;
      margin-bottom: 0px;
      border-bottom: 1px solid rgba(124, 124, 124, 0.2);
      justify-content: space-between;
      .label {
        font-size: 16px;
        font-weight: 400;
        color: #808080;
        width: 80px;
        min-width: 80px;
        text-align: right;
        height: 48px;
      }
      .label_ {
        color: @mainColor;
        text-align: right;
        margin-left: 12px;
        user-select: none;
        font-size: 14px;
      }
      .label_phone {
        width: 300px;
        text-align: left;
        padding-left: 24px;
        justify-content: flex-start;
      }
      .contentBox {
        flex: 1;
        justify-content: flex-end;
        .inputClass {
          color: #808080;
        }
      }
    }
  }
}
</style>
